<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('projectIncome.numberMode.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" label-width="120px" style="padding: 10px 20px 0">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">{{$t('projectIncome.numberMode.projectYear')}}</div>
              <el-select multiple v-model="listQuery.projectYear" collapse-tags :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in this.$store.getters.allDic.year" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">{{$t('projectIncome.numberMode.systemType')}}</div>
              <dict-select v-model="listQuery.systemType" code="systemType"></dict-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">{{$t('projectIncome.numberMode.difference')}}</div>
              <el-select v-model="listQuery.difference" collapse-tags :placeholder="$t('placeholder.choose')" clearable>
                <el-option v-for="item in this.$store.getters.allDic.difference" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="margin-right: 40px">
              <div class="labelName">{{$t('projectIncome.numberMode.epcType')}}</div>
              <el-select v-model="listQuery.epcType" collapse-tags :placeholder="$t('placeholder.choose')" clearable>
                <el-option v-for="item in epcType" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="5" style="margin-top: 23px">
            <el-button class="yt-btn-ys" type="primary" @click="handleFilter">{{$t('button.search')}}</el-button>
            <el-button class="yt-btn" type="primary" @click="reset">{{$t('button.reset')}}</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="data-list" style="position: relative">
      <div class="list-content">
        <span>{{$t('projectIncome.numberMode.listTitle')}}</span>
      </div>
      <div class="list-operation">
        <el-button class="yt-btn-ys" @click="handleRemit">{{$t('button.export')}}</el-button>
      </div>
      <el-table :data="list" :empty-text="$t('placeholder.emptyText')" border class="yt-table" style="width: 100%" :row-style="changeCss" v-loading="loading" :element-loading-text="$t('projectIncome.numberMode.loading')" element-loading-spinner="el-icon-loading" max-height="600">
        <el-table-column align="center" label="Sum" width="340" fixed>
          <!--<el-table-column align="center" :label="$t('projectIncome.numberMode.serialNum')" width="60">
            <template slot-scope="scope">
              <div>{{ scope.row.serialNum }}</div>
            </template>
          </el-table-column>-->
          <el-table-column align="center" :label="$t('projectIncome.numberMode.projectYear')" prop="projectYear" width="120"/>
          <el-table-column align="center" :label="$t('projectIncome.numberMode.difference')" prop="difference" width="110"/>
          <el-table-column align="center" :label="$t('projectIncome.numberMode.epcType')" prop="epcType" width="110"/>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.poNum">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.poNum')" prop="poNum" width="80"/>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.poMoney">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.poMoney')" prop="poMoney" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.poMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.finishedNum">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.finishedNum')" prop="finishedNum" width="80"/>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.finishMoney">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.finishMoney')" prop="finishMoney" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.finishMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.fileReadyNum">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.fileReadyNum')" prop="fileReadyNum" width="80"/>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.fileReadyMoney">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.fileReadyMoney')" prop="fileReadyMoney" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.fileReadyMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.requestFundsCheckNum">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.requestFundsCheckNum')" prop="requestFundsCheckNum" width="80"/>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.requestFundsCheckMoney">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.requestFundsCheckMoney')" prop="requestFundsCheckMoney" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.requestFundsCheckMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.acceptNum">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.acceptNum')" prop="acceptNum" width="80"/>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.checkMoney">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.checkMoney')" prop="checkMoney" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.checkMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <!--<el-table-column align="center" :label="$t('projectIncome.numberMode.reinspectionNum')" prop="reinspectionNum" width="130"/>-->
        <!--<el-table-column align="center" label="复验金额" prop="checkAgainMoney" width="130">
          <template slot-scope="scope">
            <div v-format="'#,##0'">{{ scope.row.checkAgainMoney }}</div>
          </template>
        </el-table-column>-->
        <el-table-column align="center" :label="subtotal.requestFundsSendNum">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.requestFundsSendNum')" prop="requestFundsSendNum" width="80"/>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.requestFundsSendMoney">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.requestFundsSendMoney')" prop="requestFundsSendMoney" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.requestFundsSendMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.invoiceNum">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.invoiceNum')" prop="invoiceNum" width="80"/>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.invoiceMoney">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.invoiceMoney')" prop="invoiceMoney" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.invoiceMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.realityReceivablesNum">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.realityReceivablesNum')" prop="realityReceivablesNum" width="80"/>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.receivablesMoney">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.receivablesMoney')" prop="receivablesMoney" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.receivablesMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.vendorPONum">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.vendorPONum')" prop="vendorPONum" width="80"/>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.vendorPoMoney">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.vendorPoMoney')" prop="vendorPoMoney" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.vendorPoMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.vendorInvoiceNum">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.vendorInvoiceNum')" prop="vendorInvoiceNum" width="80"/>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.vendorInvoiceMoney">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.vendorInvoiceMoney')" prop="vendorInvoiceMoney" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.vendorInvoiceMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.realityPaymentNum">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.realityPaymentNum')" prop="realityPaymentNum" width="80"/>
        </el-table-column>
        <el-table-column align="center" :label="subtotal.paymentMoney">
          <el-table-column align="center" :label="$t('projectIncome.numberMode.paymentMoney')" prop="paymentMoney" width="130">
            <template slot-scope="scope">
              <div v-format="'#,##0'">{{ scope.row.paymentMoney }}</div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <!--<div class="pagination-container">-->
        <!--<el-pagination-->
          <!--@size-change="handleSizeChange"-->
          <!--@current-change="handleCurrentChange"-->
          <!--background-->
          <!--:current-page.sync="listQuery.page"-->
          <!--:page-sizes="[10, 20, 30, 50, 100, 200]"-->
          <!--:page-size="listQuery.limit"-->
          <!--layout="total, sizes, prev, pager, next, jumper"-->
          <!--:total="total"-->
        <!--&gt;-->
        <!--</el-pagination>-->
      <!--</div>-->
    </div>
  </div>
</template>

<script>
  import dictSelect from '@/components/Dict/dictValueSelect';
  import { countForNumberAndMoney } from '@/api/pmoReport/projectIncome';
  export default {
    name: 'numberMode',
    data() {
      return {
        subtotal: {},
        listMapAll: this.$store.getters.allMapDic,
        listQuery: {
          page: 1,
          limit: 10,
          projectYear: [], // 专案年度
          systemType: '', // 系统别
          difference: '', // 区别
          epcType: '' // 工程类别
        },
        epcType: this.$store.getters.allDic.epcType,
        pattern: '', // 查看模式
        options: [],
        loading: false,
        list: [],
        total: 0,
        patternList: [
          { lable: '1', value: '件数+金额' },
          { lable: '2', value: '件数' },
          { lable: '3', value: '金额' }
        ]
      };
    },
    components: { dictSelect },
    watch: {
      'listQuery.systemType'(val) {
        this.epcType = this.$store.getters.allDic.epcType.filter(item => item.remark.indexOf(val) !== -1)
        this.listQuery.epcType = ''
      }
    },
    mounted() {
      this.getQuery()
      if (this.listQuery.projectYear.length > 0) {
        this.getData()
      }
    },
    methods: {
      changeCss({ row }) {
        if (row.projectYear.indexOf('Sub Total') !== -1) {
          return 'background:#f0f2f5;color:#ff9900'
        }
      },
      getQuery() {
        const numberModeListQuery = window.sessionStorage.getItem('numberModeListQuery');
        if (numberModeListQuery) {
          this.listQuery = JSON.parse(numberModeListQuery);
        }
      },
      handleFilter() {
        this.getData()
      },
      // 重置
      reset() {
        this.listQuery = {
          page: 1,
          limit: 10,
          projectYear: [], // 专案年度
          systemType: '', // 系统别
          difference: '', // 区别
          epcType: '' // 工程类别
        }
      },
      // 汇出
      handleRemit() {
        const a = document.createElement('a');
        const href = '/api/admin/excel/exportProjectControlTableNum?projectYear=' + this.listQuery.projectYear + '&systemType=' + this.listQuery.systemType + '&difference=' + this.listQuery.difference + '&epcType=' + this.listQuery.epcType + '&userId=' + this.$store.getters.info.id;
        a.download = Date.now();
        a.href = href;
        a.click();
      },
      getData() {
        this.loading = true
        countForNumberAndMoney(this.listQuery).then(res => {
          if (res.status === 201) {
            this.$message.error(res.message);
            this.loading = false
          } else {
            this.list = res.data.list
            this.subtotal = res.data.subTotal
            Object.keys(this.subtotal).forEach(key => {
              this.subtotal[key] = String(this.subtotal[key]).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
            })
            for (let i = 0; i < this.list.length; i++) {
              // 区别 difference
              if (this.listMapAll.difference[this.list[i].difference]) {
                this.list[i].difference = this.listMapAll.difference[this.list[i].difference];
              }
              // 工程类别 epcType
              if (this.listMapAll.epcType[this.list[i].epcType]) {
                this.list[i].epcType = this.listMapAll.epcType[this.list[i].epcType];
              }
            }
            this.loading = false
          }
        })
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem('numberModeListQuery', JSON.stringify(this.listQuery))
    }
  };
</script>
<style scoped lang="scss">
  .list-content-type{
    position: absolute;
    top: 7px;
    right: 20px;
    display: flex;
  }
</style>
